﻿@page "/layouts/column"

<Pager Title="栅格列(Columns)">
		<Demo Title="纵向对齐">
		<Run>
			<Container AdditionalCssClass="example-grid" >					
				<Row CssClass="Css.Class.AlignItems(AlignItemsOrSelf.Start)" style="height:200px" >
					<Column>1 of 3 </Column>
					<Column>2 of 3 </Column>
					<Column>3 of 3 </Column>
				</Row>
			</Container>
			<br />
			<Container AdditionalCssClass="example-grid">
				<Row CssClass="Css.Class.AlignItems(AlignItemsOrSelf.Center)" style="height:200px">
					<Column>1 of 3 </Column>
					<Column>2 of 3 </Column>
					<Column>3 of 3 </Column>
				</Row>
			</Container>
			<br />
			<Container AdditionalCssClass="example-grid">
				<Row CssClass="Css.Class.AlignItems(AlignItemsOrSelf.End)" style="height:200px">
					<Column>1 of 3 </Column>
					<Column>2 of 3 </Column>
					<Column>3 of 3 </Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>					
	<Row CssClass=""Css.Class.AlignItems(AlignItemsOrSelf.Start)"" >
		<Column>1 of 3 </Column>
		<Column>2 of 3 </Column>
		<Column>3 of 3 </Column>
	</Row>
	<Row CssClass=""Css.Class.AlignItems(AlignItemsOrSelf.Center)"">
		<Column>1 of 3 </Column>
		<Column>2 of 3 </Column>
		<Column>3 of 3 </Column>
	</Row>
	<Row CssClass=""Css.Class.AlignItems(AlignItemsOrSelf.End)"">
		<Column>1 of 3 </Column>
		<Column>2 of 3 </Column>
		<Column>3 of 3 </Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo>
		<Run>
			<Container AdditionalCssClass="example-grid" >					
				<Row style="height:200px" >
					<Column CssClass="Css.Class.AlignSelf(AlignItemsOrSelf.Start)">align self start </Column>
					<Column CssClass="Css.Class.AlignSelf(AlignItemsOrSelf.Center)">align self center </Column>
					<Column CssClass="Css.Class.AlignSelf(AlignItemsOrSelf.End)">align self end</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>					
	<Row>
		<Column CssClass=""Css.Class.AlignSelf(AlignItemsOrSelf.Start)"">align self start </Column>
		<Column CssClass=""Css.Class.AlignSelf(AlignItemsOrSelf.Center)"">align self center </Column>
		<Column CssClass=""Css.Class.AlignSelf(AlignItemsOrSelf.End)"">align self end</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo Title="横向对齐">
		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row CssClass="Css.Class.JustifyContent(JustifyContent.Start)">
					<Column Col="Col.Is4">justify content start</Column>
					<Column Col="Col.Is4">justify content start</Column>
				</Row>
				<br />
				<Row CssClass="Css.Class.JustifyContent(JustifyContent.Center)">
					<Column Col="Col.Is4">justify content center</Column>
					<Column Col="Col.Is4">justify content center</Column>
				</Row>
				<br />
				<Row CssClass="Css.Class.JustifyContent(JustifyContent.End)">
					<Column Col="Col.Is4">justify content end</Column>
					<Column Col="Col.Is4">justify content end</Column>
				</Row>
				<br />
				<Row CssClass="Css.Class.JustifyContent(JustifyContent.Around)">
					<Column Col="Col.Is4">justify content around</Column>
					<Column Col="Col.Is4">justify content around</Column>
				</Row>
				<br />
				<Row CssClass="Css.Class.JustifyContent(JustifyContent.Between)">
					<Column Col="Col.Is4">justify content between</Column>
					<Column Col="Col.Is4">justify content between</Column>
				</Row>
				<br />
				<Row CssClass="Css.Class.JustifyContent(JustifyContent.Evenly)">
					<Column Col="Col.Is4">justify content evenly</Column>
					<Column Col="Col.Is4">justify content evenly</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row CssClass=""Css.Class.JustifyContent(JustifyContent.Start)"">
		<Column Col=""Col.Is4"">justify content start</Column>
		<Column Col=""Col.Is4"">justify content start</Column>
	</Row>
	<Row CssClass=""Css.Class.JustifyContent(JustifyContent.Center)"">
		<Column Col=""Col.Is4"">justify content center</Column>
		<Column Col=""Col.Is4"">justify content center</Column>
	</Row>
	<Row CssClass=""Css.Class.JustifyContent(JustifyContent.End)"">
		<Column Col=""Col.Is4"">justify content end</Column>
		<Column Col=""Col.Is4"">justify content end</Column>
	</Row>
	<Row CssClass=""Css.Class.JustifyContent(JustifyContent.Around)"">
		<Column Col=""Col.Is4"">justify content around</Column>
		<Column Col=""Col.Is4"">justify content around</Column>
	</Row>
	<Row CssClass=""Css.Class.JustifyContent(JustifyContent.Between)"">
		<Column Col=""Col.Is4"">justify content between</Column>
		<Column Col=""Col.Is4"">justify content between</Column>
	</Row>
	<Row CssClass=""Css.Class.JustifyContent(JustifyContent.Evenly)"">
		<Column Col=""Col.Is4"">justify content evenly</Column>
		<Column Col=""Col.Is4"">justify content evenly</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo Title="列偏移">
		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row>
					<Column Col="Col.Is4">Col.Is4</Column>
					<Column Offset="Offset.Is3" Col="Col.Is4">Col.Is4 Offset.Is3</Column>
				</Row>
				<br />
				<Row>
					<Column Col="Col.Is6" Offset="Offset.Is3">Col.Is6 Offset.Is3</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row>
		<Column Col=""Col.Is4"">Col.Is4</Column>
		<Column Offset=""Offset.Is3"" Col=""Col.Is4"">Col.Is4 Offset.Is3</Column>
	</Row>
	<Row>
		<Column Col=""Col.Is6"" Offset=""Offset.Is3"">Col.Is6 Offset.Is3</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
</Pager>